<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS火焰效果</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      background: #000;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      font-family: Arial, sans-serif;
    }

    .container {
      text-align: center;
      padding: 20px;
    }

    h1 {
      color: #fff;
      margin-bottom: 40px;
      font-size: 2.5rem;
      text-shadow: 0 0 10px #ff5722, 0 0 20px #ff5722;
    }

    .flame-container {
      position: relative;
      width: 120px;
      height: 200px;
      margin: 0 auto;
    }

    .flame {
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 60px;
      height: 150px;
      border-radius: 50% 50% 20% 20%;
      background: radial-gradient(ellipse at center, #ff0000 0%, #ff7700 20%, #ffff00 40%, #ffffff 60%);
      box-shadow: 0 0 20px #ff0000, 0 0 40px #ff7700;
      animation: burn 1.5s ease-in-out infinite alternate;
    }

    .flame::before {
      content: '';
      position: absolute;
      top: -30px;
      left: 50%;
      transform: translateX(-50%);
      width: 30px;
      height: 60px;
      border-radius: 50% 50% 20% 20%;
      background: radial-gradient(ellipse at center, #ff7700 0%, #ffff00 30%, #ffffff 60%);
      animation: burn 1.2s ease-in-out infinite alternate-reverse;
    }

    .flame::after {
      content: '';
      position: absolute;
      top: -60px;
      left: 50%;
      transform: translateX(-50%);
      width: 15px;
      height: 30px;
      border-radius: 50% 50% 20% 20%;
      background: radial-gradient(ellipse at center, #ffff00 0%, #ffffff 50%);
      animation: burn 1s ease-in-out infinite alternate;
    }

    .glow {
      position: absolute;
      bottom: -30px;
      left: 50%;
      transform: translateX(-50%);
      width: 100px;
      height: 30px;
      border-radius: 50%;
      background: radial-gradient(ellipse at center, rgba(255, 119, 0, 0.5) 0%, rgba(255, 0, 0, 0) 70%);
      animation: glow 2s ease-in-out infinite alternate;
    }

    @keyframes burn {
      0% {
        transform: translateX(-50%) scale(1, 1);
        opacity: 1;
      }
      50% {
        transform: translateX(-50%) scale(1.1, 1.05);
        opacity: 0.9;
      }
      100% {
        transform: translateX(-50%) scale(0.9, 0.95);
        opacity: 0.8;
      }
    }

    @keyframes glow {
      0% {
        opacity: 0.5;
        transform: translateX(-50%) scale(1);
      }
      100% {
        opacity: 0.8;
        transform: translateX(-50%) scale(1.2);
      }
    }

    .description {
      color: #fff;
      margin-top: 40px;
      max-width: 600px;
      line-height: 1.6;
      background: rgba(255, 255, 255, 0.1);
      padding: 20px;
      border-radius: 10px;
    }

    .description h2 {
      color: #ff9800;
      margin-bottom: 15px;
    }

    .code-block {
      background: #1e1e1e;
      padding: 15px;
      border-radius: 5px;
      margin: 15px 0;
      text-align: left;
      font-family: 'Courier New', monospace;
      font-size: 14px;
      overflow-x: auto;
    }

    .code-comment {
      color: #6a9955;
    }

    .code-property {
      color: #9cdcfe;
    }

    .code-value {
      color: #ce9178;
    }
  </style>
</head>
<body>
<div class="container">
  <h1>CSS火焰燃烧效果</h1>

  <div class="flame-container">
    <div class="flame"></div>
    <div class="glow"></div>
  </div>

  <div class="description">
    <h2>实现原理</h2>
    <p>这个火焰效果完全使用CSS实现，主要技术包括：</p>
    <div class="code-block">
      <span class="code-comment">/* 1. 径向渐变创建火焰颜色 */</span><br>
      background: radial-gradient(ellipse at center, #ff0000 0%, #ff7700 20%, #ffff00 40%, #ffffff 60%);
    </div>
    <div class="code-block">
      <span class="code-comment">/* 2. 多层嵌套元素模拟火焰层次 */</span><br>
      .flame::before { <span class="code-comment">/* 火焰中层 */</span> }<br>
      .flame::after { <span class="code-comment">/* 火焰顶层 */</span> }
    </div>
    <div class="code-block">
      <span class="code-comment">/* 3. 动画模拟燃烧效果 */</span><br>
      @keyframes burn {<br>
      &nbsp;&nbsp;0% { transform: scale(1, 1); opacity: 1; }<br>
      &nbsp;&nbsp;100% { transform: scale(0.9, 0.95); opacity: 0.8; }<br>
      }
    </div>
    <p>通过不同频率的动画和透明度变化，创造出逼真的火焰摇曳效果。</p>
  </div>
</div>
</body>
</html>